@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$masker: () !default;
$masker: map.merge(
  (
    z-index: get-css-var('z-index-masker'),
    bg-color: get-css-var('color-black'),
    opacity: 45%
  ),
  $masker
);

.#{$namespace}-masker {
  &-vars {
    @include define-preset-values('masker', $masker);
  }

  @include basis;
  @include inherit-color;
  @include fixed;

  z-index: get-css-var('masker-z-index');

  &--inner {
    position: absolute;
    overflow: hidden;
  }

  &__mask {
    @include fixed;

    color: get-css-var('masker-bg-color');
    transform: translateZ(0);

    &-inner {
      width: 100%;
      height: 100%;
      background-color: currentcolor;
      opacity: get-css-var('masker-opacity');
    }
  }

  &--inner &__mask {
    position: absolute;
  }

  &__placeholder {
    @include fixed;

    pointer-events: none;
    visibility: hidden;
  }

  &__content {
    width: 0;
    height: 0;
  }

  &--disabled {
    pointer-events: none;

    & > * {
      pointer-events: auto;
    }
  }
}
